<template>
  <div class="hhhh">
    <div class="point">
      <div id="mongolia" class="mongolia" @click.stop="creat_point">
        <div
          v-for="(item, index) in markerArr"
          :key="index"
          class="marker"
          :style="{ left: item.x, top: item.y }"
          @click.stop="del_poit(index)"
        >
          <img src="@/assets/images/a.jpg" alt="" />
        </div>
      </div>
    </div>
    <n-button attr-type="button" @click="hh"> 确认</n-button>
    <div>111111111</div>
  </div>
</template>
<script>
export default {
  name: 'AppPoint',
  props: {},
  data() {
    return {
      markerArr: [],
    }
  },
  methods: {
    hh() {
      console.log(markerArr)
    },
    // 打点
    creat_point(e) {
      e = e || window.event
      let x = e.offsetX || e.layerX
      let y = e.offsetY || e.layerY
      let obj = {
        x: x + 'px',
        y: y + 'px',
      }
      this.markerArr.push(obj)
      console.log(1111111)
      console.log(this.markerArr)
    },
    // 删除点
    del_poit(index) {
      this.markerArr.splice(index, 1)
    },
  },
}
</script>
<style scoped>
.hhhh {
  width: 800px;
  height: 400px;
  background: rgba(0, 1, 0, 0.4);
}
.point {
  width: 500px;
  height: 400px;
}
.mongolia {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
}
.marker {
  width: 5px;
  height: 5px;
  position: absolute;
  background: red;
}
</style>
